<template>
	<div>
		<el-drawer title="" :visible.sync="drawer" :direction="direction" :before-close="handleClose" custom-class="drawer-info">
			<div class="info-item">
				<h5 class="from-title">基本信息</h5>
				<div class="form-item">
					<label class="form-item-label">题目类型:</label>
					<div class="form-item-content">{{ objInfo.questionTypeName }}</div>
				</div>
				<div class="form-item">
					<label class="form-item-label">标题:</label>
					<div class="form-item-content">{{ objInfo.title }}</div>
				</div>
				<div class="form-item">
					<label class="form-item-label">标题附图:</label>
					<div class="form-item-content">{{ objInfo.titleImg }}</div>
				</div>
				<div class="form-item">
					<label class="form-item-label">标题音频:</label>
					<div class="form-item-content">{{ objInfo.titleMp3 }}</div>
				</div>
				<div class="form-item">
					<label class="form-item-label">选项类型:</label>
					<div class="form-item-content">{{ objInfo.optionType }}</div>
				</div>
				<div class="form-item">
					<label class="form-item-label">题目解析:</label>
					<div class="form-item-content">{{ objInfo.analysis }}</div>
				</div>
				<div class="form-item">
					<label class="form-item-label">答案:</label>
					<div class="form-item-content">{{ objInfo.answer }}</div>
				</div>
				<div class="form-item">
					<label class="form-item-label">选项A内容:</label>
					<div class="form-item-content">{{ objInfo.answerA }}</div>
				</div>
				<div class="form-item">
					<label class="form-item-label">选项B内容:</label>
					<div class="form-item-content">{{ objInfo.answerB }}</div>
				</div>
				<div class="form-item">
					<label class="form-item-label">选项C内容:</label>
					<div class="form-item-content">{{ objInfo.answerC }}</div>
				</div>
				<div class="form-item">
					<label class="form-item-label">选项D内容:</label>
					<div class="form-item-content">{{ objInfo.answerD }}</div>
				</div>
				<div class="form-item">
					<label class="form-item-label">选项E内容:</label>
					<div class="form-item-content">{{ objInfo.answerE }}</div>
				</div>
				<div class="form-item">
					<label class="form-item-label">选项F内容:</label>
					<div class="form-item-content">{{ objInfo.answerF }}</div>
				</div>
				<div class="form-item">
					<label class="form-item-label">排序:</label>
					<div class="form-item-content">{{ objInfo.sort }}</div>
				</div>
			</div>
		</el-drawer>
	</div>
</template>
<script>
import { studyquestionInfo } from "@/api/study/exam/studyquestion.js"
import { urlList } from "@/api/public.api.js"
export default {
	data() {
		return {
			drawer: true,
			direction: "rtl",
			objInfo: {},
			qbIdList: [],
			questionTypeList: [],
		}
	},
	created() {},
	methods: {
		queryUrlList() {
			this.qbIdList = []
			urlList("/study/exam/studyQuestionbank/list").then(resp => {
				if (resp.code == 0) {
					if (resp.data) {
						resp.data.forEach(item => {
							this.qbIdList.push({ code: item.id, name: item.qbName })
						})
					}
				}
			})
		},
		queryJsonList() {
			this.questionTypeList = []
			let questionTypeListData = '[{"code":"单选题","name":"单选题"},{"code":"多选题","name":"多选题"}]'
			this.questionTypeList = JSON.parse(questionTypeListData)
		},
		init(id) {
			this.queryUrlList()
			this.queryJsonList()
			if (id) {
				studyquestionInfo(id).then(res => {
					this.objInfo = res.data
					let questionTypeObj = this.questionTypeList.find(item => {
						return item.code == this.objInfo.questionType
					})
					this.objInfo.questionTypeName = questionTypeObj ? questionTypeObj.name : ""
				})
			}
			this.drawer = true
		},
		// 关闭抽屉
		handleClose(done) {
			done()
		},
	},
}
</script>
<style scoped>
.from-title {
	margin-bottom: 20px;
	padding: 0 20px 20px 20px;
	font-size: 16px;
	color: #17233d;
	border-bottom: 1px solid #eee;
}
.info-item {
	margin-bottom: 40px;
}

.form-item {
	margin-bottom: 20px;
	font-size: 14px;
}
.form-item-label {
	text-align: right;
	float: left;
	width: 25%;
}
.form-item-content {
	margin-left: 30%;
	width: 70%;
}
</style>
